<template>
	<!-- 创店-活动详情 -->
	<view class="activityDetails" v-if="activityIDList">
		<view v-if="!is404">
			<view class="content">

				<!-- 详情头部 -->
				<detailshearder @goBack="goBack" :photoIndex="0" :menuButtonInfo="menuButtonInfo"
					:srcPhoto="activityIDList.imageList[0]"></detailshearder>

				<!-- 时间栏 -->
				<view class="activityDetails_statusbar"
					v-if="activityIDList.activityStatus == 1 || activityIDList.activityStatus == 2 || activityIDList.activityStatus == 3">
					<view class="activityDetails_time">
						<span>时间：</span>
						<span class="activityDetails_timeYear"
							v-if="activityIDList.enrollStart">{{activityIDList.enrollStart | ff_termValid}}-{{activityIDList.enrollEnd | ff_termValid}}</span>
						<span>14:00-16:00</span>
					</view>
				</view>
				<view class="activityDetails_statusbar" v-if="activityIDList.activityStatus == 4 ">
					<view class="activityDetails_time">
						<span>时间:</span>
						<span class="activityDetails_timeYear"
							v-if="activityIDList.timeStart">{{activityIDList.timeStart | ff_termValid}}-{{activityIDList.timeEnd | ff_termValid}}</span>
						<span>14:00-16:00</span>
					</view>
				</view>

				<!-- 奖励栏 -->
				<view class="activityDetails_prize">
					<span class="activityDetails_prizetitle">奖品：</span>
					<view class="activityDetails_prizebox">
						<!--  -->
						<view class="activityDetails_prizeitem" v-for="(item,index) in activityIDList.activityAwardList" :key="index">
							<!--  -->
							<view v-if="item.type == 11" class="activityDetails_prizeitembox">
								<image class="activityDetails_prizeitemimg"
									src="https://s4.ax1x.com/2022/01/27/7OzOgS.png"></image>
								<span>{{item.val}}{{item.desc}}</span>
							</view>
							<view v-if="item.type == 13" class="activityDetails_prizeitembox bgccc">
								<image class="activityDetails_prizeitemimg" :src="item.image"></image>
								<span>{{item.desc+ " " + item.val}}</span>
							</view>
							
						</view>
					</view>
				</view>


				<!-- <view v-if="activityIDList && activityIDList.activityStatusView == '报名中'" class="content_state">
					<view>任务开放中...</view>
					<view class="content_state_">
						<u-count-down separator="zh" separator-size="24" separator-color="#FFFFFF" font-size="24"
							bg-color="bgra(255,255,255,0)" color="#FFFFFF" style="z-index: 100;" :timestamp="timestamp">
						</u-count-down>后截止
					</view>
				</view>
				<view v-else-if="activityIDList && activityIDList.order.reviewStatus == 20" class="content_state">
					<view>任务开放中...</view>
					<view class="content_state_">
						<u-count-down separator="zh" separator-size="24" separator-color="#FFFFFF" font-size="24"
							bg-color="bgra(255,255,255,0)" color="#FFFFFF" style="z-index: 100;" :timestamp="timestamp">
						</u-count-down>后截止
					</view>
				</view>
				<view v-else-if="activityIDList.activityStatusView == '进行中'" class="content_state scroll_state_bg2">
					<view>{{activityIDList.activityStatusView}}</view>
				</view> 
				 <view v-else class="content_state scroll_state_bg3">
					<view>{{activityIDList.activityStatusView}}</view>
				</view> -->


				<view class="content_detailed" v-if="activityIDList.activityName">
					<!-- <view class="content_detailed_title">
						<view class="view">
							{{activityIDList.activityName}}
						</view>
						<image mode="widthFix" class="image" :src="activityIDList.categoryImage"></image>
					</view>
					<view class="content_detailed_time">
						<image src="https://z3.ax1x.com/2021/08/27/hQDVdx.png"></image>
						<view class="colorred">进行中, {{$Tools.setDate(activityIDList.timeEnd, 2)}} 任务关闭</view>
					</view>
					<view class="content_detailed_position"
						@click="goMap(activityIDList.lng,activityIDList.lat, activityIDList.address)">
						<image src="https://z3.ax1x.com/2021/08/27/hQ6nHA.png"></image>
						<view>{{activityIDList.address}}</view>
						
							<image src="https://z3.ax1x.com/2021/08/27/hQDCz4.png"></image>
						</view>
					</view> -->
					<!-- <view class="participate">
						<view class="participate_number">{{activityIDList.joinNum}} 人参与</view>
						<view class="participate_portrait">
							<image v-for="(item,index) in activityIDList.avatarList" :key="index"
								:class="'image_tx' + index" :src="item"></image>
						</view>
					</view> -->

					<!-- <view class="reward"
						v-if="activityIDList.activityAwardList && activityIDList.activityAwardList.length > 0">
						<view class="reward_">活动奖励</view>
						<view class="reward_detailed" v-for="(item,index) in activityIDList.activityAwardList"
							:key="index">
							<image :src="item.image ? item.image : 'https://z3.ax1x.com/2021/08/27/hQDiQJ.png'"
								@click="setShowDetailed(item.image)"></image>
							<view>{{item.desc+ " " + item.val}}</view>
						</view>
						<u-mask :show="showDetailed" @click="showDetailed = false">
							<view class="warp">
								<view class="rect">
									<image class="rect_image"
										:src="showImage ? showImage : 'https://z3.ax1x.com/2021/08/27/hQDiQJ.png'"
										mode="widthFix"></image>
								</view>
							</view>
						</u-mask>
					</view> -->
					<view class="u-content">
						<view class="privilegedetail_cardheard">
							<p class="privilegedetail_cardtitle">共创说明</p>
							<p class="privilegedetail_cardyinyu">Co-creation requirements</p>
						</view>
						<view  class="privilegedetail_cardtext">{{activityIDList.desc}}</view>
					</view>
					<view class="u-content">
						<view class="privilegedetail_cardheard">
							<p class="privilegedetail_cardtitle">共创要求</p>
							<p class="privilegedetail_cardyinyu">Co-creation requirements</p>
						</view>
						<u-parse :html="activityIDList.content" :tag-style="style"></u-parse>
					</view>
				</view>
			</view>
			<!-- :style="{background: userObj.hasBuy ? '#CFD0D0' : '#000'}" -->
			<view class="foot">
				<view class="dealBox_big">
					<button open-type="share" class="privilegedetail_dealfx">
						<image class="privilegedetail_dealfximg"
							src="https://s4.ax1x.com/2022/01/27/7Oz4nH.png"></image>
					</button>
					<!-- <view class="privilegedetail_dealleft">加入共创</view> -->
					<view class="privilegedetail_dealleft" v-if="activityIDList.finishForm" @click="goTask">已完成</view>
					<view class="privilegedetail_dealleft" v-else-if="activityIDList.activityStatusView == '进行中' && !activityIDList.finishForm && activityIDList.order.reviewStatus == 2 && activityIDList.order.status == 20" @click="goTask">查看任务</view>
				    <view class="privilegedetail_dealleft" v-else-if="activityIDList.order.reviewStatus == 20" @click="goTask">查看任务</view>
					<view class="privilegedetail_dealleft" v-else-if="activityIDList.activityStatusView == '进行中' && activityIDList.order.status == 30" @click="goTask">查看答卷</view>
				    <view class="privilegedetail_dealleft" v-else-if="activityIDList.order.reviewStatus == 1">报名已提交，审核中</view>
				    <view class="privilegedetail_dealleft" v-else-if="activityIDList.order.reviewStatus == 2 && activityIDList.order.status == 20" @click="goTask">查看任务</view>
				    <view class="privilegedetail_dealleft" v-else-if="activityIDList.order.reviewStatus == 3">审核不通过</view>
					<view class="privilegedetail_dealleft" v-else-if="activityIDList.activityStatusView == '报名中'" @click="goSignUp(activityIDList.activityId,activityIDList.needReview, activityIDList.formFieldList)">加入共创</view>
				    <view class="privilegedetail_dealleft" v-else-if="activityIDList.activityStatusView == '结束'">已结束</view>
					<view class="privilegedetail_dealleft" v-else-if="activityIDList.finishForm == null" >无任务</view>
				</view>

			</view>
			<!-- 发布动态  不能删 -->
			<!-- 		<view v-if="activityIDList.activityStatusView == '进行中'" class="dynamic" @click="goReleaseDynamics(activityIDList.activityId, activityIDList.commentAward)">
				<image src="https://z3.ax1x.com/2021/08/31/hd9G6O.png"></image>
			</view> -->

			<view class="popup">
				<u-popup v-model="showTask" mode="bottom" height="674" border-radius="12">
					<view class="popup_">
						<view class="popup_title">
							活动任务
							<u-icon @click="setShowTask" class="popup_title_" name="close" color="#555a62;" size="40">
							</u-icon>
						</view>
						<view>
							<scroll-view class="scroll-view_H" scroll-y="true">
								<view class="popup_content" v-for="(item, index) in activityIDList.utilItemList"
									:key="index" @click="gotaskTitle(activityIDList.activityId, !item.hasFill, index)">
									<view class="popup_content_title">
										{{item.utilItemName}}
										<!-- <view @click="gotaskTitle(activityIDList.activityId, !item.hasFill, index)" class="popup_content_title_"> -->
										<view class="popup_content_title_">
											<text class="hasFill_1" v-if="!item.hasFill">去完成</text>
											<text class="hasFill_2" v-else>已完成, 查看答卷</text>
											<u-icon name="arrow-right" color="#d90000;" size="30"></u-icon>
										</view>
									</view>
									<view class="popup_content_text">{{item.desc}}</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</u-popup>
				
			</view>
		</view>
		<view v-else>
			<cmerror></cmerror>
		</view>
		<perfectbox :img="imgs" :inviteCode="inviteCodex" :show="isShow" @ff_show="ffShows">
		</perfectbox>
	</view>
</template>

<script>
	let param_ = ''
	import detailshearder from "../../../components/detailshearder/detailshearder.vue"
	import perfectbox from "../../../components/perfectbox/perfectbox.vue";
	import cmerror from "../../../components/cmerror/cmerror.vue"
	export default {
		data() {
			return {
				inviteCodex: '',
				// 0：出现邀请码的完善信息  1：出现普通的完善信息 2：隐藏
				isShow: 2,
				userPhoneApi: "",
				imgs: "",
				isSubmit: false,
				showTask: false,
				activityIDList: [],
				timestamp: 86400, //倒计时
				showDetailed: false,
				showImage: '',
				is404: false,
				style: {
					// 字符串的形式
					img: 'width: 670rpx;'
				},
				menuButtonInfo: {
					top: 25
				},
				content: `
									<p>「占位文本」风嚣茁途婆茁在挥兰惜郭褐等，贺社势尊息愁肯乒猎茎刽寮医锈遗架滩哄野荡钱警糖迫沫灼楞异钝否笨，疯蚕羞私丽贮惜厅，官摄硝蔽岛签住废婚哇费蕴痕淮服扁饲胶盒且睾恳欢簧桐骑特劲着臣每嘴星额封火啦爽挣蜗影其初杏？垛…签轨钠千姚锁蜕歇快句过鹅集刘懂窝、龙，杉嫂容去排洒帝学昂唉番灸那陪凝肪饥咬只慢亮、鸭灭绵标鼠杰新酯或纵域，耐拚茬阱炉钾棒泛。屠展铃尿泰咬俩申敦奸飞大沉瓷芽率！</p>
									<img src="https://z3.ax1x.com/2021/09/03/hyHVt1.png" />
									<img src="https://z3.ax1x.com/2021/09/03/hyHEkR.png" />
									<p>「占位文本」风嚣茁途婆茁在挥兰惜郭褐等，贺社势尊息愁肯乒猎茎刽寮医锈遗架滩哄野荡钱警糖迫沫灼楞异钝否笨，疯蚕羞私丽贮惜厅，官摄硝蔽岛签住废婚哇费蕴痕淮服扁饲胶盒且睾恳欢簧桐骑特劲着臣每嘴星额封火啦爽挣蜗影其初杏？垛…签轨钠千姚锁蜕歇快句过鹅集刘懂窝、龙，杉嫂容去排洒帝学昂唉番灸那陪凝肪饥咬只慢亮、鸭灭绵标鼠杰新酯或纵域.！</p>
						`,
				style: {
					p: `font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 500;
						text-align: LEFT;
						color: #666666;
						line-height: 50rpx;
						margin-bottom: 20rpx;
						word-wrap:break-word;`,
					img: `margin-bottom: 20rpx`,
					div: `font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 500;
						text-align: LEFT;
						color: #2d3034;
						line-height: 50rpx;
						letter-spacing: 2rpx;
						margin-bottom: 20rpx;
						word-wrap:break-word;
						`,
					text: `font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 500;
						text-align: LEFT;
						color: #666666;
						line-height: 50rpx;
						letter-spacing: 1rpx;
						margin-bottom: 20rpx;
						word-wrap:break-word;
						`,
				
				},
			}
		},
		//
		onLoad(param) {
			// this.init(param)
			param_ = param
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// #endif

		},
		components: {
			cmerror,
			perfectbox,
			detailshearder
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'chimian',
				path: `/pages/probeShop/activityDetails/activityDetails&activityId=${param_.activityId}`
			}
		},
		onShow() {
			let param = param_
			this.init(param)
			// this.initOnShow();
		},
		onShareAppMessage() {
			return {
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				title: "我发现分享了一个好玩的东西，一起来看看吧。",
			}
		},
		filters: {
			ff_termValid(newval) {
				console.log('ff_termValid--->', newval)

				function add0(m) {
					return m < 10 ? "0" + m : m;
				}
				var time = new Date(newval);
				var y = time.getFullYear();
				var m = add0(time.getMonth() + 1);
				var d = add0(time.getDate());

				let str = `${y}.${m}.${d}`

				return str
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			initOnShow() {
				return new Promise((ress, rejj) => {
					this.isShow = 2;
					this.$apis.accountInfo().then(res => {
						if (res.code == 200) {
							this.userPhoneApi = res.data.phone;
							this.imgs = res.data.awardPrivilegeBg;
							if (res.data.needInviteCode) {

								if (res.data.inviteCode) {
									this.inviteCodex = res.data.inviteCode.code;
									if (!res.data.isMember) {
										this.isShow = 0
										uni.setStorageSync('registerToast',0)
										ress();
									} else {
										this.isShow = 2
										uni.setStorageSync('registerToast',2)
										ress();
									}
								}
							} else {
								if (!res.data.isMember) {
									this.isShow = 1
									uni.setStorageSync('registerToast',1)
									ress();
								} else {
									this.isShow = 2
									uni.setStorageSync('registerToast',2)
									ress();
								}
							}
						}
						console.log("个人信息成功", res)
					}).catch(err => {
						this.isShow = 0
						uni.setStorageSync('registerToast',0)
						ress();
						console.log("个人信息错误", err)
					})
				})
			},

			ffShows() {
				this.isShow = 2;
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			setShowDetailed(image) {
				this.showImage = image
				this.showDetailed = true
			},
			otherFun(isSubmit) {
				this.isSubmit = isSubmit
				console.log("isSubmit:", isSubmit)
				uni.showToast({
					title: "提交成功",
					icon: "success"
				})
			},
			init(param) {

				console.log("参数", param)
				console.log("activityId", param.activityId)
				this.$apis.activity(
					param.activityId
				).then(res => {
					if (res.code == 404 || res.code == 506) {
						this.is404 = true
						if(res.code == 506){
							this.is506 = true;
							this.initOnShow();
						}
					} else {
						this.activityIDList = res.data
						if (this.activityIDList.activityStatusView == '报名中') {
							this.timestamp = this.setSeconds(this.activityIDList.timeStart)
						} else if (this.activityIDList.order && this.activityIDList.order.reviewStatus == 20) {
							this.timestamp = this.setSeconds(this.activityIDList.timeEnd)
						}
						console.log(this.$Tools.startToEnd(res.data.timeEnd, res.data.timeStart))
						console.log("活动详情", res.data)
					}

				})

			},
			goSignUp(activityId, needReview, formFieldList) {
				let that = this;
				if (!formFieldList) {
					uni.requestSubscribeMessage({
						tmplIds: ['p2gClNHSPvK2h8pT9bkreXNBnth8plrPwKA6pgDGy6w',
							'moKS8MHr_jbJyIU1yWp0tsl9MgaQcOmjKThD5VSB0-g'],
						complete:ress=>{
							console.log("complete", ress.p2gClNHSPvK2h8pT9bkreXNBnth8plrPwKA6pgDGy6w)
							// 拒
							if(ress.p2gClNHSPvK2h8pT9bkreXNBnth8plrPwKA6pgDGy6w == 'reject'){
								uni.showToast({
									title: "参与失败",
									icon:'error',
									duration: 2500
								})
							}else if(ress.p2gClNHSPvK2h8pT9bkreXNBnth8plrPwKA6pgDGy6w == 'accept'){
									this.$apis.orderJoin({
										activityId: activityId,
									}).then(res => {
										// console.log("提交成功res", res)
										this.init(param_)
										setTimeout(() => {
											uni.showToast({
												title: "参与成功",
												duration: 2500
											})
										}, 200)
									})
							}
						}
						
					})

				} else {
					//  立即参与
					this.initOnShow().then(res => {
						if (this.isShow == 2) {
							uni.navigateTo({
								url: "../signUp/signUp?activityId=" + activityId
							})
						}
					})
				}
			},
			goNavigateBack() {
				let page = getCurrentPages()
				console.log("点击事件", page)
				if (page.length <= 1) {
					uni.switchTab({
						url: '../../index/index'
					})
				} else {
					uni.navigateBack()
				}
				// uni.navigateBack()
			},
			goReleaseDynamics(activityId, commentAward) {
				// 携带面值 commentAward
				uni.navigateTo({
					url: "../releaseDynamics/releaseDynamics?activityId=" + activityId + '&commentAward=' +
						commentAward
				})
			},
			goTask() {
				if (this.activityIDList.utilItemList.length > 0) {
					this.showTask = true
				} else {
					uni.showToast({
						title: "暂无任务"
					})
				}

			},
			setShowTask() {
				this.showTask = false
			},
			gotaskTitle(activityId, isHasFill, index) {
				// hasFill = true => 去完成 index 详情面的第几个表单
				if (isHasFill) {
					uni.navigateTo({
						url: "../taskTitle/taskTitle?isHasFill=" + isHasFill + "&index=" + index + "&activityId=" +
							activityId
					})
				} else {
					uni.navigateTo({
						url: "../answerSheet/answerSheet?index=" + index + "&activityId=" + activityId
					})
				}
			},
			goMap(lng, lat, address) {
				let plugin = requirePlugin('routePlan');
				let key = 'XVCBZ-JQEEU-EBPVH-2KAF2-K24PE-DKFMJ'; //使用在腾讯位置服务申请的key
				let referer = 'chimian'; //调用插件的app的名称
				let endPoint = JSON.stringify({ //终点
					'name': address,
					'latitude': lat,
					'longitude': lng
				});
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			},
			setSeconds(t) {
				let stateTime = new Date();
				let endTime = new Date(t);
				let a = Math.abs(endTime - stateTime)
				return a / 1000
			}
		}
	}
</script>

<style>
	.activityDetails {
		width: 750rpx;
		overflow-x: hidden;
		padding-bottom: 180rpx;
		/* overflow-y: hidden; */
	}

	.bg_top {
		width: 750rpx;
		background-color: #ffffff;
		position: fixed;
		z-index: 9;
	}

	.z_index {
		z-index: 10;
	}

	.top {
		width: 750rpx;
		height: 48rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: 20rpx;
	}

	.top_icon {
		/* margin-left: 32rpx; */
		/* padding-left: 32rpx; */
		padding: 0 20rpx 20rpx 32rpx;
		/* background-color: #007AFF; */
		display: inline-block;
	}

	.top_title {
		position: absolute;
		font-size: 34rpx;
		font-weight: 500;
		line-height: 48rpx;
		display: inline-block;
		left: 50%;
		transform: translate(-50%);
	}

	.content {}

	.content_image {
		font-size: 0rpx;
	}

	.content_image image {
		width: 750rpx;
		/* height: 750rpx; */
	}

	.content_state {
		/* margin-top: 10rpx; */
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		line-height: 32rpx;
		font-size: 26rpx;
		padding-left: 40rpx;
		width: 712rpx;
		height: 64rpx;
		color: #FFFFFF;
		background: linear-gradient(94deg, #f65958, #f10a09 100%);
	}

	.scroll_state_bg1 {
		background: linear-gradient(97deg, #f65958, #f10a09 100%);
	}

	.scroll_state_bg2 {
		background: linear-gradient(97deg, #4ea6ff, #1f89f2 100%);
	}

	.scroll_state_bg3 {
		background: linear-gradient(97deg, #adafb2, #a1a3a6 100%);
	}

	.content_state view {
		/* display: inline-block; */
	}

	.content_state_ {
		/* position: absolute;
		right: 40rpx; */
		font-size: 22rpx;
	}

	.content_state_ text {
		font-size: 24rpx;
		padding-right: 2rpx;
		padding-right: 4rpx;
	}

	.content_detailed {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.content_detailed_title {
		width: 670rpx;
		font-size: 36rpx;
		font-weight: 700;
		position: relative;
	}

	.content_detailed_title .view {
		width: 590rpx;
	}

	.content_detailed_title .image {
		width: 78rpx;
		/* height: 44rpx; */
		position: absolute;
		right: 0rpx;
		top: 0;
	}

	.content_detailed_title text {
		position: absolute;
		right: 6rpx;
		color: #e63018;
		font-size: 26rpx;
		line-height: 44rpx;
	}

	.content_detailed_time {
		margin-top: 32rpx;
		display: flex;
		align-items: center;
	}

	.colorred {
		color: #e63018 !important;
	}

	.content_detailed_time image {
		width: 26rpx;
		height: 26rpx;
	}

	.content_detailed_time view {
		color: #606266;
		font-size: 28rpx;
		display: inline-block;
		margin-left: 12rpx;
	}

	.content_detailed_position {
		margin-top: 18rpx;
		position: relative;
		display: flex;
	}

	.content_detailed_position image {
		width: 26rpx;
		height: 26rpx;
		vertical-align: top;
		flex: 0 0 26rpx;
		transform: translateY(4rpx);
	}

	.content_detailed_position view {
		color: #606266;
		font-size: 26rpx;
		display: inline-block;
		margin-left: 12rpx;
		vertical-align: top;
		line-height: 33rpx;
		flex: 1;
	}

	.content_detailed_position .map {
		/* position: absolute; */
		right: 0;
		color: #2D3034;
		font-size: 26rpx;
		font-weight: 500;
		flex: 0 0 100rpx;
	}

	..content_detailed_position .map image {
		width: 22rpx;
		height: 22rpx;
		margin-left: 2rpx;
	}

	.participate {
		width: 610rpx;
		height: 88rpx;
		border: 1px solid #e1e3e5;
		border-radius: 12rpx;
		padding-left: 40rpx;
		line-height: 88rpx;
		margin-top: 44rpx;
		font-size: 24rpx;
		color: #606266;
		position: relative;
	}

	.participate_number {
		display: inline-block;
	}

	.participate_portrait {
		display: inline-block;
		position: absolute;
		right: 30rpx;
		top: 24rpx;
		direction: rtl;
		font-size: 0;
		/* transform: translateY(-50%); */
	}

	.participate_portrait image {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1rpx #FFFFFF solid;
		position: relative;
		margin: 0rpx;
		padding: 0rpx;
		/* transform: translateX(-12rpx); */
	}

	.participate_portrait .image_tx0 {
		/* transform: translateX(-12rpx); */
		/* z-index: 6 !important; */
	}

	.participate_portrait .image_tx1 {
		transform: translateX(12rpx);
		/* z-index: 5; */
	}

	.participate_portrait .image_tx2 {
		transform: translateX(24rpx);
		/* z-index: 4; */
	}

	.participate_portrait .image_tx3 {
		transform: translateX(36rpx);
		/* z-index: 3; */
	}

	.participate_portrait .image_tx4 {
		transform: translateX(48rpx);
		/* z-index: 2; */
	}

	.participate_portrait .image_tx5 {
		transform: translateX(60rpx);
	}

	.reward {
		margin-top: 64rpx;
	}

	.reward_ {
		color: #2d3034;
		font-weight: 600;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		text-align: center;
		width: 240rpx;
		height: 24rpx;
		/* background-color: #fff; */
	}

	.rect_image {
		line-height: 240rpx;
		width: 100%;
		height: 100%;
	}

	.reward_detailed {
		display: inline-block;
		margin-right: 58rpx;
		text-align: center;
	}

	.reward_detailed image {
		width: 80rpx;
		height: 80rpx;
	}

	.reward_detailed view {
		font-size: 22rpx;
		color: #2d3034;
	}

	.details_content {
		margin-top: 48rpx;
	}

	.details_content_title {
		color: #2d3034;
		font-weight: 600;
		font-size: 30rpx;
	}

	.rich_text {
		width: 670rpx;
		margin-bottom: 200rpx;
	}

	.details_content_image {
		width: 670rpx;
		height: 410rpx;
		margin-bottom: 20rpx;
	}

	.details_content_text {
		color: #000000;
		line-height: 48rpx;
		font-size: 30rpx;
		font-weight: 400;
		margin-bottom: 20rpx;
	}

	.details_content_image1 {
		width: 670rpx;
		height: 410rpx;
		margin-bottom: 100rpx;
	}
	.u-content {
		margin-top: 48rpx;
		box-sizing: border-box;
	}
	.privilegedetail_cardyinyu{
		height: 26rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 26rpx;
		color: #000000;
	}
	.privilegedetail_cardheard{
		margin-bottom: 16rpx;
	}
	.privilegedetail_cardtext{
		width: 100%;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #666666;
	}
	.privilegedetail_cardtitle{
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 50rpx;
		color: #C4292B;
	}

	.foot {
		width: 670rpx;
		padding: 16rpx 40rpx 68rpx 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 10;
	}
	.dealBox_big {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 112rpx;
		background: rgba(255, 255, 255, 0.39);
		border: 5rpx solid #CFD0D0;
		border-radius: 56rpx;
		align-items: center;
	}
	
	.privilegedetail_dealleft {
		width: 224rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #000;
		border-radius: 56rpx;
		color: #FFFFFF;
		font-size: 40rpx;
		text-align: center;
	
		margin-right: 20rpx;
	
	}
	
	.privilegedetail_dealfx {
		background-color: transparent;
		outline: none;
		border: none;
		margin: 0;
		display: flex;
		align-items: center;
		padding: 0 80rpx 0 30rpx;
	
	}
	.privilegedetail_dealfx::after {
			border: none;
		}
	

	.foot_share {
		width: 54rpx;
		margin: 8rpx 42rpx 6rpx 12rpx;
		display: inline-block;
		vertical-align: top;
	}

	.foot_share button {
		width: 54rpx;
		margin: 0;
		padding: 0;
		border: none;
		background-color: #FFFFFF;
		vertical-align: top;
		display: flex;
		flex-direction: column;
	}

	.foot_share button::after {
		border: none;
	}

	.foot_share image {
		width: 44rpx;
		height: 44rpx;
	}

	.foot_share_text {
		font-size: 20rpx;
		color: #606266;
	}

	.foot_title {
		width: 562rpx;
		height: 84rpx;
		background: #f10200;
		border-radius: 6px;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		line-height: 84rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 2rpx;
	}

	.foot_title_ing {
		background-color: #1f89f2;
	}

	.foot_title_isSubmit {
		background-color: #c8cacc;
	}

	.dynamic {
		width: 128rpx;
		height: 128rpx;
		background: #f10200;
		border-radius: 50%;
		box-shadow: 0px 5px 15px -5px #f10200;
		position: fixed;
		right: 48rpx;
		bottom: 266rpx;
		z-index: 11;
	}

	.dynamic image {
		width: 68rpx;
		height: 68rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.popup_ {
		/* margin: 40rpx 40rpx 0 40rpx; */
		padding: 40rpx 40rpx 0 40rpx;
		width: 670rpx;
	}

	.popup_title {
		line-height: 52rpx;
		font-size: 36rpx;
		color: #2d3034;
		font-weight: 700;
		position: relative;
		margin-bottom: 40rpx;
	}

	.popup_title_ {
		position: absolute;
		right: 2rpx;
		top: 2rpx;
	}

	.scroll-view_H {
		height: 470rpx;
	}

	.popup_content {
		width: 666rpx;
		height: 190rpx;
		margin-bottom: 30rpx;
		border: 1px solid #e1e3e5;
		border-radius: 6px;
	}

	.popup_content_title {
		width: 590rpx;
		padding: 30rpx 40rpx;
		font-size: 32rpx;
		font-weight: 700;
		position: relative;
	}

	.popup_content_title_ {
		display: inline-block;
		position: absolute;
		right: 40rpx;
		font-size: 28rpx;
	}

	.popup_content_text {
		width: 590rpx;
		height: 60rpx;
		padding: 0 40rpx;
		font-size: 26rpx;
		line-height: 30rpx;
		color: #555a62;

		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.hasFill_1 {
		color: #f10200;
	}

	.hasFill_2 {
		color: #555a62;
	}

	.activityDetails_statusbar {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		height: 20px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 20px;
		color: #000000;

	}

	.activityDetails_timeYear {
		margin: 0 20rpx;
	}

	.activityDetails_prize {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 600;
		margin-top: 32rpx;
		display: flex;

	}

	.activityDetails_prizeitem {
		flex: 1;
	}

	.activityDetails_prizetitle {
		flex: 0 0 97rpx;
	}

	.activityDetails_prizeitembox {
		padding: 0 24rpx;
		border-radius: 46rpx;
		background-color: #C4292B;
		height: 52rpx;
		line-height: 52rpx;
		color: #fff;
		display: inline-block;
		float: left;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
	/* .bgccc{
		background-color: #3F536E;
	} */

	.activityDetails_prizeitemimg {
		width: 32rpx;
		height: 32rpx;
		margin-right: 5rpx;
		position: relative;
		top: 5rpx;
	}
	.activityDetails_prizebox{
		flex: 1;
		overflow: hidden;
	}
	.privilegedetail_dealfximg {
		width: 64rpx;
		height: 64rpx;
	}
</style>
